const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpackCommon        = require('./webpack.common.js')
const webpackMerge		   = require('webpack-merge')
const webpack              = require('webpack')



module.exports=webpackMerge(webpackCommon,{
	devtool:"eval",
	// 开发环境下开启devServer
	devServer:{
		contentBase:'./dist',
		hot:true,
		inline:true,
		index:"index.html",
		// 请求代理，另开一个服务器当作资源服务器，解决Ajax跨域，模仿数据请求
		proxy:{
			"/api": {target:"http://localhost:81"}
		}
	},
	output:{
		filename: "js/[name].js",
		chunkFilename: 'js/[name].bundle.js'
	},
	optimization: {
	    splitChunks: {
	    	// 暂时用此配置，还没弄清根本原因
	        chunks: "all"
	    },
	    // 开发环境下，当前选项关闭
	    runtimeChunk:false
	},
	plugins:[
		// 开发环境下，未变动模块的Hash保持
		new webpack.NamedModulesPlugin(),
		// HMR 热模块替换----应用于开发环境
	    new webpack.HotModuleReplacementPlugin()
	],
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					// 开发模式下热替换，直接用style-loader
					'style-loader',
					"css-loader",						
					"postcss-loader"
				]
			},
			{
				test:/\.less$/,

					use:[
						// 开发模式下热替换，直接用style-loader
						"style-loader",
						"css-loader",
						"postcss-loader",
						"less-loader"
					]
			}
		]
	}
})